<template>
  <div class="dashboard-container">
    <!-- 数据统计卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <div class="card-header">
            <span>学生总数</span>
            <i class="el-icon-user"></i>
          </div>
          <div class="card-content">
            <count-to :start-val="0" :end-val="statistics.memberCount" :duration="2000" class="card-num"/>
            <div class="card-trend">
              较上月 <span class="up">+3.2%</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <div class="card-header">
            <span>本月活动数</span>
            <i class="el-icon-s-flag"></i>
          </div>
          <div class="card-content">
            <count-to :start-val="0" :end-val="statistics.activityCount" :duration="2000" class="card-num"/>
            <div class="card-trend">
              较上月 <span class="up">+5.1%</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <div class="card-header">
            <span>学习资源数</span>
            <i class="el-icon-reading"></i>
          </div>
          <div class="card-content">
            <count-to :start-val="0" :end-val="statistics.resourceCount" :duration="2000" class="card-num"/>
            <div class="card-trend">
              较上月 <span class="up">+12.5%</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <div class="card-header">
            <span>平均学习时长</span>
            <i class="el-icon-time"></i>
          </div>
          <div class="card-content">
            <count-to :start-val="0" :end-val="statistics.studyHours" :duration="2000" class="card-num"/>
            <div class="card-trend">
              较上月 <span class="up">+2.8%</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 新增统计信息区域 -->
    <div class="statistics-container">
      <el-card class="module-card">
        <template #header>
          <span>统计信息</span>
        </template>
        <el-row type="flex" justify-content="space-between">
          <el-col :span="12">
            <!-- 新增科目下拉选择框 -->
            <el-select v-model="selectedSubject" placeholder="选择科目" @change="updateScoreHistogram">
              <el-option label="语文" value="语文"></el-option>
              <el-option label="数学" value="数学"></el-option>
              <!-- 可根据实际情况添加更多科目 -->
            </el-select>
            <!-- 新增成绩分布直方图容器 -->
            <div id="score-histogram" style="width: 600px; height: 400px;"></div>
          </el-col>
          <el-col :span="12">
            <el-select v-model="weeklyStudyObject" placeholder="选择科目" @change="updateWeeklyStudyHours">
              <el-option v-for="(item, index) in weeklyStudyHours" :label="item.name" :value="item.id" :key="index"></el-option>
            </el-select>
            <!-- 新增学习时长折线图容器 -->
            <div id="study-time-line" style="width: 600px; height: 400px;"></div>
          </el-col>
        </el-row>  
      </el-card>
    </div>

    <!-- 核心功能模块 -->
    <el-row :gutter="20" class="module-row">
      <el-col :span="8">
        <el-card class="module-card">
          <div slot="header">
            <span>学生信息管理</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="handleMore('member')">
              更多<i class="el-icon-arrow-right"></i>
            </el-button>
          </div>
          <div class="module-content">
            <el-table :data="memberList" style="width: 100%">
              <el-table-column prop="name" label="姓名" width="80"/>
              <el-table-column prop="type" label="类型" width="100"/>
              <el-table-column prop="status" label="状态">
                <template slot-scope="{row}">
                  <el-tag :type="row.status === '正常' ? 'success' : 'warning'">{{ row.status }}</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="module-card">
          <div slot="header">
            <span>近期学校活动</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="handleMore('activity')">
              更多<i class="el-icon-arrow-right"></i>
            </el-button>
          </div>
          <div class="module-content">
            <div v-for="item in activityList" :key="item.id" class="activity-item">
              <div class="activity-title">{{ item.title }}</div>
              <div class="activity-info">
                <span>{{ item.date }}</span>
                <el-tag size="mini" :type="item.status === '进行中' ? 'warning' : 'success'">
                  {{ item.status }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="module-card">
          <div slot="header">
            <span>组织架构</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="handleMore('org')">
              更多<i class="el-icon-arrow-right"></i>
            </el-button>
          </div>
          <div class="module-content org-tree">
            <el-tree :data="orgTree" :props="defaultProps" default-expand-all></el-tree>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import * as echarts  from 'echarts'; // 引入 ECharts 库
import yuwenMockData from '../class-overview/yuwen.js';
import shuxueMockData from '../class-overview/shuxue.js';
export default {
  name: 'Dashboard',
  components: {
    CountTo
  },
  data() {
    return {
      statistics: {
        memberCount: 156,
        activityCount: 28,
        resourceCount: 520,
        studyHours: 45
      },
      memberList: [
        { id: 1, name: '张三', type: '正式学生', status: '正常' },
        { id: 2, name: '李四', type: '预备学生', status: '正常' },
        { id: 3, name: '王五', type: '发展对象', status: '培养中' }
      ],
      activityList: [
        { id: 1, title: '党史学习教育', date: '2024-03-15', status: '进行中' },
        { id: 2, title: '主题党日活动', date: '2024-03-20', status: '未开始' },
        { id: 3, title: '学生大会', date: '2024-03-10', status: '已结束' }
      ],
      orgTree: [{
        label: '党委',
        children: [{
          label: '党总支部',
          children: [{
            label: '第一党支部'
          }, {
            label: '第二党支部'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      studyList: [
        { 
          id: 1, 
          title: '习近平新时代中国特色社会主义思想',
          desc: '理论学习',
          icon: 'el-icon-reading'
        },
        { 
          id: 2, 
          title: '党的二十大精神解读',
          desc: '专题培训',
          icon: 'el-icon-video-camera'
        },
        { 
          id: 3, 
          title: '党章学习',
          desc: '基础知识',
          icon: 'el-icon-document'
        }
      ],
      evaluationList: [
        { id: 1, name: '张三', score: 95, rank: 1, status: '优秀' },
        { id: 2, name: '李四', score: 88, rank: 2, status: '良好' },
        { id: 3, name: '王五', score: 85, rank: 3, status: '良好' }
      ],
      // 其他数据保持不变
      selectedSubject: '语文', // 新增选中科目的变量
      // 新增统计信息数据
      totalStudents: 0,
      averageScore: 0,
      excellentStudents: 0,
      passingStudents: 0,
      subjectStatistics: {},
      weeklyStudyObject: 0,
      // 模拟每个学生每个月的学习时长数据
      weeklyStudyHours: [
        { id: 0, name: '全部', hours: [] },
        { id: 1, name: '张三', hours: [] },
        { id: 2, name: '李四', hours: [] },
        { id: 3, name: '王五', hours: [] }
      ]
    }
  },
  mounted() {
    this.generateRandomHours();
    this.calculateTotalHours();
    // 初始化时默认显示所有科目的成绩分布
    this.updateScoreHistogram();
    this.updateWeeklyStudyHours();
  },
  methods: {
    handleMore(type) {
      const routeMap = {
        member: '/party-member/list',
        activity: '/party-activity/list',
        org: '/party-org/tree',
        study: '/study/resource',
        evaluation: '/evaluation/list'
      }
      this.$router.push(routeMap[type])
    },
    generateRandomHours() {
      for (let i = 1; i < this.weeklyStudyHours.length; i++) {
        const student = this.weeklyStudyHours[i];
        student.hours = [];
        for (let j = 0; j < 12; j++) {
          student.hours.push(Math.floor(Math.random() * 15)); // 生成 0 - 14 的随机整数
        }
      }
    },
    calculateTotalHours() {
      const totalHours = new Array(12).fill(0);
      for (let i = 1; i < this.weeklyStudyHours.length; i++) {
        const student = this.weeklyStudyHours[i];
        for (let j = 0; j < 12; j++) {
          totalHours[j] += student.hours[j];
        }
      }
      this.weeklyStudyHours[0].hours = totalHours;
    },
    updateScoreHistogram() {
      let mockData = [];
      if (this.selectedSubject === '语文') {
        mockData = yuwenMockData;
      } else if (this.selectedSubject === '数学') {
        mockData = shuxueMockData;
      } else {
        mockData = [...yuwenMockData, ...shuxueMockData];
      }

      // 计算成绩分布
      const scoreDistribution = [0, 0, 0, 0];
      mockData.forEach(item => {
        const score = item.examScore;
        if (score < 60) {
          scoreDistribution[0]++;
        } else if (score < 80) {
          scoreDistribution[1]++;
        } else if (score < 90) {
          scoreDistribution[2]++;
        } else {
          scoreDistribution[3]++;
        }
      });

      // 初始化成绩分布直方图 ECharts 实例
      const scoreChart = echarts.init(document.getElementById('score-histogram'));
      const scoreOption = {
        title: {
          text: '成绩分布直方图',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ['60分以下', '60分到80分', '80分到90分', '90分到100分'],
          name: '分数区间',
          nameTextStyle: {
            color: '#666',
            fontSize: 12,
            padding: [10, 10, 10, 10]
          }
        },
        yAxis: {
          type: 'value',
          name: '学生人数',
          nameTextStyle: {
            color: '#666',
            fontSize: 12,
            padding: [0, 0, 10, 0]
          }
        },
        series: [
          {
            type: 'bar',
            data: scoreDistribution,
            itemStyle: {
              color: '#5470C6'
            }
          }
        ]
      };
      scoreChart.setOption(scoreOption);
    },
    updateWeeklyStudyHours(){
      const selectedStudent = this.weeklyStudyHours.find(student => student.id === this.weeklyStudyObject);
       // 初始化学习时长折线图 ECharts 实例
      const studyTimeChart = echarts.init(document.getElementById('study-time-line'));
      const studyTimeOption = {
        title: {
          text: '学习时长折线图',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],          name: '时间',
          nameTextStyle: {
            color: '#666',
            fontSize: 12,
            padding: [10, 0, 0, 0]
          }
        },
        yAxis: {
          type: 'value',
          name: '平均学习时长（小时）',
          nameTextStyle: {
            color: '#666',
            fontSize: 12,
            padding: [0, 0, 10, 0]
          }
        },
        series: [
          {
            type: 'line',
            data: selectedStudent.hours,
            itemStyle: {
              color: '#91CC75'
            }
          }
        ]
      };
      studyTimeChart.setOption(studyTimeOption);
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  
  .data-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      
      i {
        font-size: 24px;
        color: #409EFF;
      }
    }
    
    .card-content {
      text-align: center;
      
      .card-num {
        font-size: 36px;
        font-weight: bold;
        color: #303133;
      }
      
      .card-trend {
        margin-top: 10px;
        font-size: 14px;
        color: #909399;
        
        .up {
          color: #67C23A;
        }
        
        .down {
          color: #F56C6C;
        }
      }
    }
  }
  
  .module-row {
    margin-top: 20px;
  }
  
  .module-card {
    .module-content {
      height: 300px;
      overflow-y: auto;
    }
    
    .activity-item {
      padding: 10px 0;
      border-bottom: 1px solid #EBEEF5;
      
      .activity-title {
        font-size: 14px;
        margin-bottom: 8px;
      }
      
      .activity-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: #909399;
      }
    }
    
    .org-tree {
      padding: 10px;
    }
    
    .study-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      border-bottom: 1px solid #EBEEF5;
      
      .study-info {
        display: flex;
        align-items: center;
        
        i {
          font-size: 24px;
          color: #409EFF;
          margin-right: 10px;
        }
        
        .study-detail {
          .study-title {
            font-size: 14px;
            margin-bottom: 5px;
          }
          
          .study-desc {
            font-size: 12px;
            color: #909399;
          }
        }
      }
    }
  }

  // 新增统计信息区域样式
  .statistics-container {
    padding: 10px 0px;
  }
}
</style> 